<template>
	<div>
		<div class="container">
			<div class="nav">
				<router-link to="/layout">
					<img src="../assets/smallIcon/return.png"  alt="">
				</router-link>	
				<Search />
			</div>	
			<div class="ul1">
				<ul>
					<router-link to="/layout/museum" tag="li">故宫</router-link>
					<li>颐和园</li>
					<li>长城</li>
					<li>西藏</li>
				</ul>
			</div>
			<div class="ul2">
				<ul>
					<li>国家博物院</li>
					<li>九寨沟神农架</li>
					<li>杭州</li>
				</ul>
			</div>
			<div class="ul3">
				<ul>
					<li>曼谷</li>
					<li>上海迪士尼</li>
					<li>东京</li>
					<li>荷兰</li>
				</ul>
			</div>
			<div class="list1">
			长白山天池
				<img src="../assets/smallIcon/close.png" alt="">
			</div>
			<div class="list2">
			王府井
				<img src="../assets/smallIcon/close.png" alt="">
			</div>
			<div class="list3">
			西单
				<img src="../assets/smallIcon/close.png" alt="">
			</div>
			<div class="list4">
			西岭雪山
				<img src="../assets/smallIcon/close.png" alt="">
			</div>
			<div class="list5">
			西岭雪山
				<img src="../assets/smallIcon/close.png" alt="">
			</div>
		</div>
	</div>
</template>
<script>
	import Search from '../components/search'
	export default{
		name:"jingqu",
		data(){
			return{
			}
		},
		components:{
			Search
		}
	}
</script>
<style scoped lang="less">
	.nav{
		width:100%;
		height:94 / 50rem;
		background-color: #7DD19C;
		overflow: hidden;
		img{
			width: 22 /50rem;
			height:40 /50rem;
			float: left;
			margin-left: 20/ 50rem;
			margin-top: 28/50rem;
		}
		.search{
			float: left;
			position: relative;
			overflow: hidden;
			margin-left: 16.2%;
			input{
				width: 456 /50rem;
				height: 66 /50rem;
				border-radius: 30 /50rem;
				border: none;
				background-color: rgba(255,255,255,0.4);
				outline: none;
				float: left;
				margin-top: 14 /50rem;
				text-indent: 80 /50rem;
				color:#fff;
			}
			::-webkit-input-placeholder{
				color:#fff;
			}
			.sousuo{
				float: left;
				position: absolute;
				left: 32 /50rem;
				top:32 /50rem;
				color:#fff;
			}
			#close{
				width: 30 /50rem;
				height: 30 /50rem;
				background-color: #fff;
				border-radius: 50%;
				text-align: center;
				line-height: 30 /50rem;
				position: absolute;
				right: 32 /50rem;
				top:32 /50rem;
				i{
					font-size: 14 /50rem;
					color:#7dd19d;
				}
			}
		}
	}

	.ul1{
		margin-top:37 / 50rem;
		margin-left:20 / 50rem;
		height:47 / 50rem;
	}
	.ul1 li{
		float: left;
		margin-left: 40 / 50rem;
		font-family: "PingFang SC";
		font-size: 26 / 50rem;
		text-align: center;
		line-height: 47 / 50rem;
	}
	.ul1 li:nth-child(1){
		width:92 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul1 li:nth-child(2){
		width:108 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul1 li:nth-child(3){
		width:92 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul1 li:nth-child(4){
		width:92 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}

	.ul2{
	    margin-top: 40 / 50rem;
		margin-left:20 / 50rem;
		height:47 / 50rem;
	}
	.ul2 li{
		float: left;
		margin-left: 40 / 50rem;
		font-family: "PingFang SC";
		font-size: 26 / 50rem;
		text-align: center;
		line-height: 47 / 50rem;
	
	}
	.ul2 li:nth-child(1){
		width:160 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul2 li:nth-child(2){
		width:184 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul2 li:nth-child(3){
		width:92 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}

	.ul3{
		margin-top: 40 / 50rem;
		margin-left:20 / 50rem;
		height:47 / 50rem;
	}
	.ul3 li{
		float: left;
		margin-left: 40 / 50rem;
		font-family: "PingFang SC";
		font-size: 26 / 50rem;
		text-align: center;
		line-height: 47 / 50rem;
		
	}
	.ul3 li:nth-child(1){
		width:92 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul3 li:nth-child(2){
		width:160 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul3 li:nth-child(3){
		width:92 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.ul3 li:nth-child(4){
		width:92 / 50rem;
		height:47 / 50rem;
		border:2 / 50rem solid #5dade2;
		border-radius: 10 / 50rem;
	}
	.list1{
		margin-top: 69 / 50rem;
	}
	.list1 img{
		width:16 / 50rem;
		height:20 / 50rem;
		float: right;
	}
	.list2 img{
		width:16 / 50rem;
		height:20 / 50rem;
		float: right;
	}
	.list3 img{
		width:16 / 50rem;
		height:20 / 50rem;
		float: right;
	}
	.list4 img{
		width:16 / 50rem;
		height:20 / 50rem;
		float: right;
	}
	.list5 img{
		width:16 / 50rem;
		height:20 / 50rem;
		float: right;
	}
	.list1,.list2,.list3,.list4,.list5{
		border-bottom:2 / 50rem solid #5dade2;
		margin-left: 20 / 50rem;
		margin-right: 20 / 50rem;
		padding-bottom: 20 / 50rem;
		font-size: 26 / 50rem;
		font-family: "PingFang SC";
	}
	.list2,.list3,.list4,.list5{
		margin-top: 36 / 50rem;
	}


	
	





    
	
	
	
</style>